<template>
	<view class="wisdom">
		<view class="nav">
			<view class="navItem" :class="navIndex == index ? 'navActive':''" v-for="(item,index) in navList" :key="index" @tap="navClick(index)">{{item}}</view>
		</view>
		<view v-if="navIndex == 0" class="cols">
			<navigator :url="'../child/drill-impression?student_id=' + student_id" hover-class="false" class="col">
				<i class="iconfont iconziliaotongbu"></i>
				<text>同步记录</text>
			</navigator>
			<navigator :url="'../qulian/practice-records?student_id=' + student_id" hover-class="false" class="col">
				<i class="iconfont iconxunlian"></i>
				<text>趣练记录</text>
			</navigator>
			<navigator :url="'../child/exam-impression?student_id=' + student_id" hover-class="false" class="col">
				<i class="iconfont iconkaoshijilu"></i>
				<text>自评记录</text>
			</navigator>
			<navigator url="../classOrder/course-all" hover-class="false" class="col">
				<i class="iconfont iconkecheng1"></i>
				<text>课程记录</text>
			</navigator>
			<navigator url="../package/packagelist" hover-class="false" class="col">
				<i class="iconfont iconkebao-xianxing_huaban1"></i>
				<text>课包记录</text>
			</navigator>
		</view>
		<view v-if="navIndex == 1" class="wisdom-city">
			<view class="wisdom-city-nav">
				<view class="item item_school">学校</view>
				<view class="item item_mk">
					<navigator url="/pages/free-lesson/free-index" hover-class="false">
						名课
					</navigator>
				</view>
			</view>
			<view class="mk" v-for="(item,index) in famousSubjectList" :key="index">
				<navigator :url="'../package/packagedetail?package_id=' + item.unid" hover-class="false">
					<view class="mk-item sub_name">
						{{item.package_name}}
					</view>
					<view class="mk-item sub_msg">
						<view class="pre-sale">{{item.grade}}</view>
						<view class="section-count">章节数：{{item.package_num>100?99+'+':item.package_num}}</view>
						<view class="resource-count">资源数：{{item.resource_num>100?99+'+':item.package_num}}</view>
						<view class="sub-price">￥{{item.price}}</view>
					</view>
					<view class="mk-item sale-count">
						已售{{item.sales_num}}人
					</view>
				</navigator>
			</view>
			<view class="famousLoading">{{famousLoading}}</view>
		</view>
		<view v-if="navIndex == 2">
			<scroll-view scroll-x="true" class="arts">
				<view class="tip">
					<view class="tipItem" :class="tipIndex == item.article_type_id ? 'tipActive':''" v-for="(item,index) in tipList"
					 :key="index" @tap="tipClick(item.article_type_id)">{{item.article_name}}</view>
				</view>
			</scroll-view>
			<list :list='list' :status="status" :contentText="contentText" stateType="0" addType="1"></list>
		</view>
	</view>
</template>

<script>
	import util from '@/common/util.js';
	import list from '@/components/artlist/artlist.vue';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			list,
			uniLoadMore
		},
		data() {
			return {
				student_id: uni.getStorageSync('currentChild').student_id,
				navList: ['智提升', '智源城', '智囊团'],
				navIndex: 0,
				page: 1,
				reload: true,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多',
					contentnot: "没数据"
				},
				list: [], //文章列表
				tipList: [], //标签列表
				tipIndex: 0, //标签索引
				famousLoading: '正在加载中',
				famousSubjectList: [],
				subPage: 1
			}
		},
		onPullDownRefresh() {
			if (this.navIndex == 1) {
				console.log('智源下拉事件')
			} else if (this.navIndex == 2) {
				this.reload = true;
				this.page = 1;
				if (this.navIndex == 1) {
					this.getArt();
				}
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			}
		},
		onReachBottom() {
			this.famousLoading = ''
			if (this.navIndex == 1) {
				if (this.famousSubjectList.length > 100) {
					this.famousLoading = '不能贪得无厌哦'
				} else {
					this.famousLoading = '正在加载中'
					setTimeout(() => {
						this.subPage += 1
						this.getSubjectList()
					}, 200)
				}
			} else if (this.navIndex == 2) {
				this.status = 'loading';
				this.page = this.page + 1;
				var _this = this;
				setTimeout(function() {
					if (_this.navIndex == 1) {
						_this.getArt();
					}
				}, 500);
			}
		},
		onShow() {
			this.getTip();
			this.reload = true;
			this.page = 1;
			if (this.navIndex == 1) {
				this.getArt();
			}
			if (this.navIndex != 1) {
				var webView = this.$mp.page.$getAppWebview();
				webView.setTitleNViewButtonStyle(0, {
					text: ' ',
				});
			}
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: '/pages/articleModule/article-manage?stateType=3&addType=4'
			})
		},
		methods: {
			/* 获取文章列表 */
			getArt() {
				var data = {
					page: this.page,
					pagesize: 7,
					is_check: 2,
					article_type_id: this.tipIndex
				}
				this.$zapi.apiPost('user/wisdom.Lists/articleList', data).then(res => {
					if (res.data.code == 200 && res.data.data.data) {
						var list = res.data.data.data;
						for (var i = 0; i < list.length; i++) {
							list[i].time = util.getBriefTime(list[i].creat_time);
							if (list[i].subhead_creat_time) {
								list[i].ftime = util.getBriefTime(list[i].subhead_creat_time);
							}
						}
						this.list = this.reload ? list : this.list.concat(list);
						this.reload = false;
						this.status = 'more';
					} else {
						if (this.reload) {
							this.list = [];
						} else {
							this.status = 'noMore';
						}
					}
				})
			},
			/* 获取标签列表 */
			getTip() {
				this.$zapi.apiPost('user/wisdom.Lists/listType').then(res => {
					if (res.data.code == 200 && res.data.data) {
						this.tipList = res.data.data;
						this.tipList.unshift({
							article_name: "全部",
							article_type_id: 0
						});
					} else {
						this.tipList = [];
						this.tipList.unshift({
							article_name: "全部",
							article_type_id: 0
						});
					}
				})
			},
			/* nav切换 */
			navClick(index) {
				this.navIndex = index;
				this.reload = true;
				this.page = 1;
				this.tipIndex = 0;
				if (index == 1) {
					this.famousSubjectList = []
					this.subPage = 1
					this.getSubjectList()
				}
				var webView = this.$mp.page.$getAppWebview();
				if (this.navIndex == 2) {
					this.getArt();
					webView.setTitleNViewButtonStyle(0, {
						text: '我的',
					});
				} else {
					webView.setTitleNViewButtonStyle(0, {
						text: ' ',
					});
				}
			},
			/* 暂未开通 */
			none() {
				uni.showToast({
					title: '该功能暂未开通',
					icon: 'none'
				})
			},
			/* tip切换 */
			tipClick(id) {
				this.tipIndex = id;
				this.reload = true;
				this.page = 1;
				this.getArt();
			},
			// 获取学包
			getSubjectList() {
				this.$papi.apiPost('moblie/package/infos', {
					limit: 6,
					page: this.subPage
				}).then(res => {
					if (res.data.code == 200) {
						if (this.famousSubjectList.length > 0) {
							if (res.data.data.list.length == 0) {
								this.subPage -= 1
								this.famousLoading = '没有更多数据啦'
							} else {
								this.famousSubjectList.push(...res.data.data.list)
							}
						} else {
							this.famousSubjectList = res.data.data.list
						}
					}
				}).catch(e => {
					this.famousLoading = '服务器似乎出现了点小问题~'
				})
			}
		},
	}
</script>

<style>
	/* 顶部选项卡 */
	.nav {
		height: 88upx;
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: fixed;
		top: 0;
		left: 0;
		background: #FFFFFF;
	}

	.navItem {
		color: #666666;
		font-size: 34upx;
		display: flex;
		justify-content: center;
		line-height: 82upx;
		flex-direction: column;
		align-items: center;
	}

	.navActive {
		color: #FF9900;
	}

	.navActive:after {
		content: '';
		width: 32upx;
		height: 4upx;
		font-weight: bold;
		background: #FF9900;
	}

	/* 内容&智提升 */
	.cols {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		border-top: 20upx solid #FAFAFA;
		position: absolute;
		top: 88upx;
		left: 0;
		z-index: -1;
	}

	.col {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 248upx;
		height: 200upx;
		border-bottom: 2upx solid #E5E5E5;
		border-right: 2upx solid #E5E5E5;
	}

	.col:nth-child(3n) {
		border-right: none;
	}

	.col i {
		font-size: 54upx;
		line-height: 96upx;
	}

	.col text {
		color: #666666;
		font-size: 32upx;
	}

	.iconziliaotongbu,
	.iconkaoshijilu,
	.iconketang1 {
		color: #00D5A2;
	}

	.iconxunlian,
	.iconkecheng1 {
		color: #00ACFE;
	}

	.iconkecheng1 {
		font-size: 76upx !important;
		line-height: 1.2;
	}

	.iconzhiping {
		color: #FF9900;
	}

	.iconkebao-xianxing_huaban1 {
		color: #00ACFE;
		font-size: 60upx !important;
		line-height: 1.5;
	}

	/* 内容&智囊团 */
	.arts {
		position: fixed;
		top: 88upx;
		left: 0;
		background: #FAFAFA;
	}

	.tip {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		border-top: 30upx solid #FAFAFA;
		border-bottom: 30upx solid #FAFAFA;
		white-space: nowrap;
	}

	.tipItem {
		color: #999999;
		font-size: 30upx;
		padding: 8upx 22upx;
		border: 2upx solid #CCCCCC;
		line-height: 1;
		text-align: center;
		border-radius: 26upx;
		margin-left: 30upx;
		margin-right: 10upx;
	}

	.tipActive {
		color: #FFFFFF;
		background: #FF9900;
		border: 2upx solid #FF9900;
	}
</style>
<style lang="scss" scoped>
	/* 智源城 */
	.wisdom-city {
		margin-top: 88upx;
		background: #FAFAFA;

		.wisdom-city-nav {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-around;

			.item {
				width: 100upx;
				height: 44upx;
				line-height: 44upx;
				border-radius: 46upx;
				text-align: center;
				margin-top: 28upx;
				font-size: 28upx;
			}

			.item_school {
				background: #FF9900;
				color: #FFFFFF;
			}

			.item_mk {
				border: 2upx solid #CCCCCC;
				color: #999999;
			}
		}

		.mk {
			width: 690upx;
			height: 240upx;
			margin: 0 auto;
			background: #FFFFFF;
			margin-top: 30upx;

			.sub_name {
				font-size: 36upx;
				color: #333333;
				font-weight: bold;
				padding: 30upx 0 0 40upx;
			}

			.sub_msg {
				display: flex;
				flex-direction: row;
				padding-left: 40upx;

				.pre-sale {
					width: 72upx;
					white-space: nowrap;
					overflow: hidden;
					height: 40upx;
					line-height: 40upx;
					font-size: 26upx;
					color: #FFFFFF;
					background: #FF9900;
					border-radius: 40upx;
					text-align: center;
				}

				.section-count {
					width: 146upx;
					font-size: 24upx;
					color: #999999;
					margin-left: 20upx;
				}

				.resource-count {
					width: 146upx;
					margin-left: 46upx;
					font-size: 24upx;
					color: #999999;
				}

				.sub-price {
					font-size: 44upx;
					color: #FF9900;
					margin-left: auto;
					padding-right: 40upx;
				}
			}

			.sale-count {
				font-size: 26upx;
				color: #999999;
				margin-left: 524upx;
			}
		}
	}

	.famousLoading {
		width: 100%;
		font-size: 32upx;
		color: #e2deff;
		text-align: center;
	}
</style>
